<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-row>
        <!-- 添加 -->
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="addClick">添加用户</el-button>
          </div>
        </el-col>

        <!-- 表格 :data数据源-->

        <zk-table
          :data="catList"
          :columns="columns"
          :show-index="true"
          index-text="#"
          :stripe="true"
          :selection-type="false"
          :expand-type="false"
          border
        >
          <!-- 是否有效 -->
          <template slot="isok" slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.cat_deleted === false"
              style="color: lightgreen"
            ></i>
            <i class="el-icon-error" v-else></i>
          </template>
          <!-- 排序 -->
          <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag
              type="success"
              size="mini"
              v-else-if="scope.row.cat_level === 1"
              >二级</el-tag
            >
            <el-tag type="warning" size="mini" v-else>三级</el-tag>
          </template>
          <!-- 操作 -->
          <template slot="opt" slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editCat(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="delCat(scope.row)"
              >删除</el-button
            >
          </template>
        </zk-table>
        <!--  -->
      </el-row>
      <!-- 分页 -->
      <el-pagination
        :page-size="querInfo.pagesize"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="cateChange"
      >
      </el-pagination>
    </el-card>

    <!-- 点击添加弹框 -->
    <el-dialog
      title="提示"
      @close="closeAdd"
      :visible.sync="addDialog"
      width="30%"
    >
      <!-- <span>这是一段信息</span> -->
      <!--  表单 -->
      <el-form
        ref="addCatRef"
        :model="addForm"
        :rules="addCatRules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 角色名称 -->
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <!-- 级联选择器 props 指定配置选项
        options 指定数据源
        v-model 绑定的是数组 第一个值为一级的id 第二个值为二级的id
        -->
        <el-form-item label="分类分类">
          <el-cascader
            clearable
            v-model="opcitions"
            :options="parentList"
            :props="catCascProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addbtn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑的弹框 -->
    <el-dialog
      title="提示"
      @close="closeAdd"
      :visible.sync="editDialog"
      width="30%"
    >
      <!-- <span>这是一段信息</span> -->
      <!--  表单 -->
      <el-form
        ref="addCatRef"
        :model="addForm"
        :rules="addCatRules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 角色名称 -->
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="editbtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
// 引入表格
import http from '../util/http'

Vue.use(ZkTable)
export default {
  data () {
    return {
      // 分类的数据
      catList: [],
      querInfo: {
        type: 3,
        pagenum: 2,
        pagesize: 5
      },
      // 总的数据
      total: 1,
      // tree需要的格式
      defaultProps: {
        label: 'cat_name',
        children: 'children'
      },
      //   指定列的定义
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        // 定义模板
        {
          label: '是否有效',
          prop: 'cat_deleted',
          type: 'template', // 定义模板
          template: 'isok' // 插槽名称
        },
        // 排序
        {
          label: '排序',
          prop: 'cat_level',
          type: 'template', // 定义模板
          template: 'order' // 插槽名称
        },
        // 操作
        {
          label: '排序',
          type: 'template', // 定义模板
          template: 'opt' // 插槽名称
        }
      ],
      // 添加的弹框
      addDialog: false,
      // 编辑的弹框
      editDialog: false,
      // 父级的数据
      parentList: [],
      // 添加的规则
      addCatRules: {
        cat_name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      },
      // 要添加的表单数据
      addForm: {
        cat_name: 'a',
        cat_pid: 0,
        cat_level: 0
      },
      // 级联选择器的配置
      catCascProps: {
        value: 'cat_id', // 选中值的id
        label: 'cat_name', // 看到的值
        childred: 'childred', // 父子嵌套的属性
        expandTrigger: 'hover',
        checkStrictly: true
      },
      // 选择数据的id
      opcitions: []
    }
  },
  mounted () {
    //   分类数据
    this.getCat()
  },
  methods: {
    // 数据
    getCat () {
      http('categories', { params: this.querInfo }).then((res) => {
        console.log(res.data.data.resul)
        this.catList = res.data.data.result
        this.total = res.data.data.total
      })
    },
    // 监听分页
    cateChange (val) {
      // console.log(val);
      this.querInfo.pagenum = val
      this.getCat()
    },
    // 点击添加的事件
    addClick () {
      // 请求父级的列表
      http({
        method: 'get',
        url: 'categories',
        params: { type: 2 }
      }).then((res) => {
        // console.log();
        this.parentList = res.data.data
      })
      // 弹框为true
      this.addDialog = true
    },
    // 选择完级联选择器的时候触发的
    handleChange () {
      console.log(this.opcitions)
      // 把选择的数据赋值到要添加的表单中
      // 如果opcitions的长度大于0代表有选择 反之没有选择
      if (this.opcitions.length > 0) {
        this.addForm.cat_pid = this.opcitions[this.opcitions.length - 1]
        this.addForm.cat_level = this.opcitions.length
      } else {
        this.addForm.cat_pid = 0
        this.addForm.cat_level = 0
      }
    },
    // 确认添加
    addbtn () {
      http({
        url: 'categories',
        method: 'post',
        data: this.addForm
      }).then((res) => {
        // console.log(res.data);
        console.log(res.data.meta.status)
        if (res.data.meta.status === 201) {
          console.log(11)
          this.$message.success('添加成功')
          this.getCat()
        } else {
          this.$message.error('添加失败')
        }
      })
      this.addDialog = false
    },
    // 关闭弹框的时候
    closeAdd () {
      this.addForm.cat_name = ''
      this.opcitions = ''
    },
    // 点击编辑的时候
    editCat (val) {
      this.editDialog = true
      // 把名称赋值给双向绑定的值 和id
      this.addForm.cat_pid = val.cat_id
      this.addForm.cat_name = val.cat_name
    },
    // 点击确定的时候发送请求
    editbtn () {
      http({
        url: `categories/${this.addForm.cat_pid}`,
        data: { cat_name: this.addForm.cat_name },
        method: 'put'
      }).then((res) => {
        if (res.data.meta.status === 200) {
          this.getCat()
          this.$message.success('修改成功')
        } else {
          this.$message.error('修改失败')
        }
      })
      this.editDialog = false
    },
    // 删除
    // 删除标签
    async delCat (row) {
      const res = await this.$confirm('是否删除次分类', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

      if (res === 'confirm') {
        http.delete(`categories/${row.cat_id}`).then((suc) => {
          if (suc.data.meta.status === 200) {
            this.$message.success('删除成功')
            this.getCat()
          } else {
            this.$message.error('删除失败')
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
